<script setup lang="ts">
import HyForm from '@/common/hy-form/src/HyForm.vue'
import { IFormItem } from '@/common/hy-form'
import {
  addGovOrg,
  delGovOrg,
  editGovOrg,
  getGovOrgAll
} from '@/service/api/sys/village/structure'
import { useOperate } from '@/stores/operate'
import { ElMessageBox } from 'element-plus'

// 树形配置项
const treeProps = {
  label: 'name',
  children: 'childrenList',
  id: 'id',
  pid: 'parentId'
}
// 树形图label配置
const treeStyleProps = {
  padding: '10px 20px',
  background: '#305272',
  border: '1px solid #2DF2FF',
  borderRadius: '4px'
}
// 树形图
const treeTool = {
  scale: false,
  restore: false,
  expand: false,
  zoom: false,
  fullscreen: false
}
const Router = useRouter()
const operateStore = useOperate()
const itemStyle = {
  marginRight: '15px',
  display: 'flex',
  flexDirection: 'column'
} // 基础样式
const type = operateStore.$state.type // 查询 新增 编辑 删除
const title = operateStore.$state.typeObj[type] // 当前的操作类名
const organization = ref<Array<any>>([]) // 组织
// 第一级架构
const formBase = ref<Array<IFormItem>>([
  {
    type: 'input',
    field: 'name',
    label: '组织名称',
    placeholder: '请输入组织名称'
  }
])
// 下级别架构
const formUp = ref<Array<IFormItem>>([
  {
    type: 'cascade',
    field: 'parentId',
    label: '上级组织',
    options: organization.value,
    optionsKey: 'name',
    optionsValue: 'id',
    optionsChildren: 'childrenList',
    placeholder: '请选择上级组织'
  },
  {
    type: 'input',
    field: 'name',
    label: '组织名称',
    placeholder: '请输入组织名称'
  }
])
const form = ref<any>(operateStore.$state.form) // 表单内容

// 更新数据
const updateForm = (value: any) => {
  form.value = value
}

// 获取组织框架所有
const getGovOrg = async () => {
  const res = await getGovOrgAll()
  organization.value.push(
    ...[
      {
        id: -1,
        name: '请选择'
      },
      ...res.data
    ]
  )
  console.log(res)
}

// 保存信息
const save = async () => {
  ElMessageBox.confirm(`确认${title}?`, {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      try {
        switch (type) {
          case 2:
            // 新增
            await addGovOrg(form.value)
            break
          case 3:
            await editGovOrg(form.value)
            // 编辑
            break
          case 4:
            // 删除
            await delGovOrg(form.value)
            break
          default:
            ElMessage({
              type: 'warning',
              message: `${title}错误!`
            })
            // 其他
            break
        }
        ElMessage({
          type: 'success',
          message: `${title}成功, 稍后返回!`
        })
        setTimeout(() => {
          Router.back()
        }, 1000)
      } catch {
        ElMessage({
          type: 'error',
          message: `${title}失败, 请重试!`
        })
      }
    })
    .catch(() => {})
}

onMounted(() => {
  getGovOrg()
})

console.log(form)
</script>

<template>
  <div class="flex flex-col">
    <div v-if="type === 1" class="h-[380px] w-[600px]">
      <vue3-tree-org
        :data="form"
        center
        :draggable="true"
        disabled
        default-expand-level="1"
        :node-draggable="false"
        :props="treeProps"
        :collapsable="true"
        :label-style="treeStyleProps"
        :toolBar="treeTool"
        class="bg-[#0D1A2A]"
      />
    </div>
    <div v-else-if="type === 4" class="w-[300px] text-center text-sm">
      删除该组织后，组织下的所有数据也将会删除，是否确认删除？
    </div>
    <div v-else>
      <hy-form
        :model-value="form"
        :formItems="form.parentId && form.parentId > 0 ? formUp : formBase"
        labelWidth="auto"
        :colLayout="{ xl: 1 }"
        :itemStyle="itemStyle"
        @update:modelValue="updateForm"
      />
    </div>
    <div class="mt-7 flex justify-center">
      <el-button type="primary" class="button_default" @click="Router.back()"
        >关闭</el-button
      >
      <el-button
        v-if="type !== 1"
        :type="type === 4 ? 'danger' : 'primary'"
        :class="type === 4 ? 'button_delete' : 'button_function'"
        @click="save"
        >{{ type === 4 ? '删除' : '保存' }}</el-button
      >
    </div>
  </div>
</template>

<style scoped></style>
